<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComfyUI 工作流配置表单</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            neutral: '#64748B',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .node-card {
        @apply bg-white rounded-lg shadow-md p-4 mb-6 transition-all duration-300 hover:shadow-lg;
      }
      .section-title {
        @apply text-xl font-bold text-dark mb-4 pb-2 border-b border-gray-200;
      }
      .form-group {
        @apply mb-4;
      }
      .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
      }
      .form-control {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
      }
      .collapsible-header {
        @apply flex justify-between items-center cursor-pointer;
      }
      .group-badge {
        @apply inline-block px-2 py-1 text-xs font-semibold rounded-full mr-2;
      }
      .json-output {
        @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm my-4 max-h-96;
      }
      .alert {
        @apply p-4 rounded-md mb-6 transition-all duration-300;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto px-4 py-8 max-w-7xl">
  <header class="mb-8">
    <h1 class="text-3xl font-bold text-dark mb-2">ComfyUI 工作流配置</h1>
    <p class="text-gray-600">工作流ID: 887e8f0b-2fee-4316-bdc4-69b0de2b263e</p>
  </header>

  <!-- 提交状态提示 -->
  <div id="alert" class="alert hidden"></div>

  <!-- 工作流组信息 -->
  <section class="node-card mb-8">
    <h2 class="section-title flex items-center">
      <i class="fa fa-folder-open text-primary mr-2"></i>工作流组
    </h2>
    <div class="grid md:grid-cols-2 gap-4">
      <div class="form-group">
        <span class="group-badge bg-blue-100 text-blue-800">组 1</span>
        <span>上传原图</span>
      </div>
      <div class="form-group">
        <span class="group-badge bg-blue-100 text-blue-800">组 2</span>
        <span>文本反推</span>
      </div>
      <div class="form-group">
        <span class="group-badge bg-blue-100 text-blue-800">组 3</span>
        <span>FLUX图生图自带反推LoRA3.0</span>
      </div>
      <div class="form-group">
        <span class="group-badge bg-blue-100 text-blue-800">组 4</span>
        <span>填写LoRA的触发词或者正面关键词</span>
      </div>
    </div>
  </section>

  <!-- 节点配置表单 -->
  <section>
    <h2 class="section-title flex items-center">
      <i class="fa fa-cubes text-primary mr-2"></i>节点配置
    </h2>

    <form id="workflowForm">
      <!-- 65: UNet加载器 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">65. UNet加载器 (UNETLoader)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="65_unet_name">模型名称</label>
            <input type="text" id="65_unet_name" class="form-control"
                   value="ReVAnimated_v168动漫通用F.1大模型_v1.0.safetensors"
                   data-node="65" data-key="unet_name">
          </div>
          <div class="form-group">
            <label class="form-label" for="65_weight_dtype">权重类型</label>
            <input type="text" id="65_weight_dtype" class="form-control" value="fp8_e4m3fn"
                   data-node="65" data-key="weight_dtype">
          </div>
        </div>
      </div>

      <!-- 66: 基本调度器 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">66. 基本调度器 (BasicScheduler)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="66_scheduler">调度器类型</label>
            <input type="text" id="66_scheduler" class="form-control" value="normal"
                   data-node="66" data-key="scheduler">
          </div>
          <div class="form-group">
            <label class="form-label" for="66_steps">步数</label>
            <input type="number" id="66_steps" class="form-control" value="30"
                   data-node="66" data-key="steps">
          </div>
          <div class="form-group">
            <label class="form-label" for="66_denoise">降噪程度</label>
            <input type="number" step="0.01" id="66_denoise" class="form-control" value="0.8"
                   data-node="66" data-key="denoise">
          </div>
          <div class="form-group">
            <label class="form-label" for="66_model">模型</label>
            <input type="text" id="66_model" class="form-control" value="[96, 0]"
                   data-node="66" data-key="model">
          </div>
        </div>
      </div>

      <!-- 67: 自定义采样器（高级） -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">67. 自定义采样器（高级） (SamplerCustomAdvanced)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="67_noise">噪波</label>
            <input type="text" id="67_noise" class="form-control" value="[70, 0]"
                   data-node="67" data-key="noise">
          </div>
          <div class="form-group">
            <label class="form-label" for="67_guider">引导器</label>
            <input type="text" id="67_guider" class="form-control" value="[69, 0]"
                   data-node="67" data-key="guider">
          </div>
          <div class="form-group">
            <label class="form-label" for="67_sampler">采样器</label>
            <input type="text" id="67_sampler" class="form-control" value="[71, 0]"
                   data-node="67" data-key="sampler">
          </div>
          <div class="form-group">
            <label class="form-label" for="67_sigmas">Sigmas</label>
            <input type="text" id="67_sigmas" class="form-control" value="[66, 0]"
                   data-node="67" data-key="sigmas">
          </div>
          <div class="form-group">
            <label class="form-label" for="67_latent_image">Latent图像</label>
            <input type="text" id="67_latent_image" class="form-control" value="[77, 0]"
                   data-node="67" data-key="latent_image">
          </div>
        </div>
      </div>

      <!-- 68: CLIP文本编码 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">68. CLIP文本编码 (CLIPTextEncode)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="68_text">文本</label>
            <textarea id="68_text" class="form-control" rows="4"
                      data-node="68" data-key="text">["92",0]</textarea>
          </div>
          <div class="form-group">
            <label class="form-label" for="68_speak_and_recognation">语音识别</label>
            <input type="text" id="68_speak_and_recognation" class="form-control" value="{&quot;__value__&quot;:[false,true]}"
                   data-node="68" data-key="speak_and_recognation">
          </div>
          <div class="form-group">
            <label class="form-label" for="68_clip">CLIP</label>
            <input type="text" id="68_clip" class="form-control" value="[75, 0]"
                   data-node="68" data-key="clip">
          </div>
        </div>
      </div>

      <!-- 69: 基本引导器 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">69. 基本引导器 (BasicGuider)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="69_model">模型</label>
            <input type="text" id="69_model" class="form-control" value="[96, 0]"
                   data-node="69" data-key="model">
          </div>
          <div class="form-group">
            <label class="form-label" for="69_conditioning">条件</label>
            <input type="text" id="69_conditioning" class="form-control" value="[78, 0]"
                   data-node="69" data-key="conditioning">
          </div>
        </div>
      </div>

      <!-- 70: 随机噪波 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">70. 随机噪波 (RandomNoise)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="70_noise_seed">噪波种子</label>
            <input type="number" id="70_noise_seed" class="form-control" value="980755266704110"
                   data-node="70" data-key="noise_seed">
          </div>
        </div>
      </div>

      <!-- 71: K采样器选择 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">71. K采样器选择 (KSamplerSelect)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="71_sampler_name">采样器名称</label>
            <input type="text" id="71_sampler_name" class="form-control" value="euler"
                   data-node="71" data-key="sampler_name">
          </div>
        </div>
      </div>

      <!-- 72: 加载VAE -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">72. 加载VAE (VAELoader)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="72_vae_name">VAE名称</label>
            <input type="text" id="72_vae_name" class="form-control" value="ae.sft"
                   data-node="72" data-key="vae_name">
          </div>
        </div>
      </div>

      <!-- 73: VAE解码 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">73. VAE解码 (VAEDecode)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="73_samples">样本</label>
            <input type="text" id="73_samples" class="form-control" value="[67, 0]"
                   data-node="73" data-key="samples">
          </div>
          <div class="form-group">
            <label class="form-label" for="73_vae">VAE</label>
            <input type="text" id="73_vae" class="form-control" value="[72, 0]"
                   data-node="73" data-key="vae">
          </div>
        </div>
      </div>

      <!-- 74: 保存图像 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">74. 保存图像 (SaveImage)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="74_filename_prefix">文件名前缀</label>
            <input type="text" id="74_filename_prefix" class="form-control" value="ComfyUI"
                   data-node="74" data-key="filename_prefix">
          </div>
          <div class="form-group">
            <label class="form-label" for="74_images">图像</label>
            <input type="text" id="74_images" class="form-control" value="[73, 0]"
                   data-node="74" data-key="images">
          </div>
        </div>
      </div>

      <!-- 75: 双CLIP加载器 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">75. 双CLIP加载器 (DualCLIPLoader)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="75_clip_name1">CLIP名称1</label>
            <input type="text" id="75_clip_name1" class="form-control" value="t5xxl_fp8_e4m3fn.safetensors"
                   data-node="75" data-key="clip_name1">
          </div>
          <div class="form-group">
            <label class="form-label" for="75_clip_name2">CLIP名称2</label>
            <input type="text" id="75_clip_name2" class="form-control" value="clip_l.safetensors"
                   data-node="75" data-key="clip_name2">
          </div>
          <div class="form-group">
            <label class="form-label" for="75_type">类型</label>
            <input type="text" id="75_type" class="form-control" value="flux"
                   data-node="75" data-key="type">
          </div>
          <div class="form-group">
            <label class="form-label" for="75_device">设备</label>
            <input type="text" id="75_device" class="form-control" value="default"
                   data-node="75" data-key="device">
          </div>
        </div>
      </div>

      <!-- 77: VAE编码 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">77. VAE编码 (VAEEncode)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="77_pixels">像素</label>
            <input type="text" id="77_pixels" class="form-control" value="[80, 0]"
                   data-node="77" data-key="pixels">
          </div>
          <div class="form-group">
            <label class="form-label" for="77_vae">VAE</label>
            <input type="text" id="77_vae" class="form-control" value="[72, 0]"
                   data-node="77" data-key="vae">
          </div>
        </div>
      </div>

      <!-- 78: Flux引导 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">78. Flux引导 (FluxGuidance)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="78_guidance">引导强度</label>
            <input type="number" step="0.1" id="78_guidance" class="form-control" value="3.5"
                   data-node="78" data-key="guidance">
          </div>
          <div class="form-group">
            <label class="form-label" for="78_conditioning">条件</label>
            <input type="text" id="78_conditioning" class="form-control" value="[68, 0]"
                   data-node="78" data-key="conditioning">
          </div>
        </div>
      </div>

      <!-- 80: 加载图像 -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">80. 加载图像 (LoadImage)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="80_image">图像文件</label>
            <input type="text" id="80_image" class="form-control" value="图层 6.png"
                   data-node="80" data-key="image">
          </div>
        </div>
      </div>

      <!-- 86: Florence2Run -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">86. Florence2Run (Florence2Run)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="86_text_input">文本输入</label>
            <input type="text" id="86_text_input" class="form-control" value=""
                   data-node="86" data-key="text_input">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_task">任务</label>
            <input type="text" id="86_task" class="form-control" value="prompt_gen_tags"
                   data-node="86" data-key="task">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_fill_mask">填充遮罩</label>
            <input type="checkbox" id="86_fill_mask" class="form-control" checked
                   data-node="86" data-key="fill_mask">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_keep_model_loaded">保持模型加载</label>
            <input type="checkbox" id="86_keep_model_loaded" class="form-control"
                   data-node="86" data-key="keep_model_loaded">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_max_new_tokens">最大新标记数</label>
            <input type="number" id="86_max_new_tokens" class="form-control" value="1024"
                   data-node="86" data-key="max_new_tokens">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_num_beams">Beam数量</label>
            <input type="number" id="86_num_beams" class="form-control" value="3"
                   data-node="86" data-key="num_beams">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_do_sample">采样</label>
            <input type="checkbox" id="86_do_sample" class="form-control" checked
                   data-node="86" data-key="do_sample">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_output_mask_select">输出遮罩选择</label>
            <input type="text" id="86_output_mask_select" class="form-control" value=""
                   data-node="86" data-key="output_mask_select">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_seed">种子</label>
            <input type="number" id="86_seed" class="form-control" value="392993200269193"
                   data-node="86" data-key="seed">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_speak_and_recognation">语音识别</label>
            <input type="text" id="86_speak_and_recognation" class="form-control" value="{&quot;__value__&quot;:[false,true]}"
                   data-node="86" data-key="speak_and_recognation">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_image">图像</label>
            <input type="text" id="86_image" class="form-control" value="[80, 0]"
                   data-node="86" data-key="image">
          </div>
          <div class="form-group">
            <label class="form-label" for="86_florence2_model">Florence2模型</label>
            <input type="text" id="86_florence2_model" class="form-control" value="[89, 0]"
                   data-node="86" data-key="florence2_model">
          </div>
        </div>
      </div>

      <!-- 89: Florence2ModelLoader -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">89. Florence2ModelLoader (Florence2ModelLoader)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="89_model">模型</label>
            <input type="text" id="89_model" class="form-control" value="Florence-2-large-PromptGen-v2.0"
                   data-node="89" data-key="model">
          </div>
          <div class="form-group">
            <label class="form-label" for="89_precision">精度</label>
            <input type="text" id="89_precision" class="form-control" value="fp16"
                   data-node="89" data-key="precision">
          </div>
          <div class="form-group">
            <label class="form-label" for="89_attention">注意力机制</label>
            <input type="text" id="89_attention" class="form-control" value="sdpa"
                   data-node="89" data-key="attention">
          </div>
          <div class="form-group">
            <label class="form-label" for="89_convert_to_safetensors">转换为Safetensors</label>
            <input type="checkbox" id="89_convert_to_safetensors" class="form-control"
                   data-node="89" data-key="convert_to_safetensors">
          </div>
        </div>
      </div>

      <!-- 90: Show Text -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">90. Show Text (ShowText|pysssss)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="90_text_0">文本0</label>
            <textarea id="90_text_0" class="form-control" rows="4"
                      data-node="90" data-key="text_0">1girl, solo, looking at viewer, smile, short hair, blue eyes, blonde hair, cleavage, jewelry, bare shoulders, medium breasts, collarbone, upper body, earrings, teeth, indoors, necklace, blurry, grey eyes, blurry background, teeth whitening, bob cut, eyewear on face, eyelashes, missing teeth, portrait</textarea>
          </div>
          <div class="form-group">
            <label class="form-label" for="90_text">文本</label>
            <input type="text" id="90_text" class="form-control" value="[86, 2]"
                   data-node="90" data-key="text">
          </div>
        </div>
      </div>

      <!-- 92: LayerUtility: TextJoin -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">92. 文本连接 (LayerUtility: TextJoin)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="92_text_1">文本1</label>
            <input type="text" id="92_text_1" class="form-control" value="[93, 0]"
                   data-node="92" data-key="text_1">
          </div>
          <div class="form-group">
            <label class="form-label" for="92_text_2">文本2</label>
            <input type="text" id="92_text_2" class="form-control" value="[86, 2]"
                   data-node="92" data-key="text_2">
          </div>
        </div>
      </div>

      <!-- 93: ttN text -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">93. 文本输入 (ttN text)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="93_text">文本</label>
            <textarea id="93_text" class="form-control" rows="3"
                      data-node="93" data-key="text">kk3d ip，2.5D,cartoon,Pixar,Clay style，HIRO.No hands</textarea>
          </div>
          <div class="form-group">
            <label class="form-label" for="93_speak_and_recognation">语音识别</label>
            <input type="text" id="93_speak_and_recognation" class="form-control" value="{&quot;__value__&quot;:[false,true]}"
                   data-node="93" data-key="speak_and_recognation">
          </div>
        </div>
      </div>

      <!-- 96: LoRA加载器（仅模型） -->
      <div class="node-card">
        <div class="collapsible-header">
          <h3 class="font-semibold text-lg">96. LoRA加载器（仅模型） (LoraLoaderModelOnly)</h3>
          <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
        </div>
        <div class="collapsible-content mt-4">
          <div class="form-group">
            <label class="form-label" for="96_lora_name">LoRA名称</label>
            <input type="text" id="96_lora_name" class="form-control" value="GPT-4o风格丨 B端APP图标风格3D卡通IP形象_v1.0.safetensors"
                   data-node="96" data-key="lora_name">
          </div>
          <div class="form-group">
            <label class="form-label" for="96_strength_model">模型强度</label>
            <input type="number" step="0.01" id="96_strength_model" class="form-control" value="1.0"
                   data-node="96" data-key="strength_model">
          </div>
          <div class="form-group">
            <label class="form-label" for="96_model">模型</label>
            <input type="text" id="96_model" class="form-control" value="[65, 0]"
                   data-node="96" data-key="model">
          </div>
        </div>
      </div>

      <div class="flex justify-end gap-4 mt-8">
        <button type="button" id="resetBtn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition duration-200">
          <i class="fa fa-refresh mr-1"></i> 重置
        </button>
        <button type="submit" class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition duration-200">
          <i class="fa fa-save mr-1"></i> 保存配置
        </button>
      </div>
    </form>

    <!-- JSON输出区域 -->
    <section class="node-card mt-8">
      <h2 class="section-title flex items-center">
        <i class="fa fa-code text-primary mr-2"></i>生成的JSON配置
      </h2>
      <pre id="jsonOutput" class="json-output">{
    <span class="text-gray-400">// 提交表单后将显示JSON数据</span>
}</pre>
    </section>
  </section>
</div>

<script>
  // 折叠/展开功能
  document.addEventListener('DOMContentLoaded', function() {
    const headers = document.querySelectorAll('.collapsible-header');
    const form = document.getElementById('workflowForm');
    const jsonOutput = document.getElementById('jsonOutput');
    const resetBtn = document.getElementById('resetBtn');
    const alert = document.getElementById('alert');

    // 存储原始表单数据用于重置
    const originalFormData = {};

    // 初始化折叠功能和原始数据存储
    headers.forEach(header => {
      header.addEventListener('click', function() {
        const content = this.nextElementSibling;
        const icon = this.querySelector('i.fa-chevron-down');

        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          icon.style.transform = 'rotate(0deg)';
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
          icon.style.transform = 'rotate(180deg)';
        }
      });
    });

    // 收集原始表单数据
    document.querySelectorAll('[data-node][data-key]').forEach(input => {
      const node = input.dataset.node;
      const key = input.dataset.key;

      if (!originalFormData[node]) {
        originalFormData[node] = {};
      }

      if (input.type === 'checkbox') {
        originalFormData[node][key] = input.checked;
      } else {
        originalFormData[node][key] = input.value;
      }
    });

    // 默认展开第一个节点
    if (headers.length > 0) {
      headers[0].click();
    }

    // 表单提交处理
    form.addEventListener('submit', function(e) {
      e.preventDefault();

      // 构建与原始JSON结构一致的对象
      const formData = {
        "client_id": "e5b93fdeada741bfadc437050aa0b3a2",
        "prompt": {},
        "extra_data": {
          "extra_pnginfo": {
            "workflow": {
              "id": "887e8f0b-2fee-4316-bdc4-69b0de2b263e",
              "revision": 0,
              "last_node_id": 96,
              "last_link_id": 199,
              "nodes": [],
              "links": [],
              "groups": [],
              "config": {},
              "extra": {},
              "version": 0.4,
              "widget_idx_map": {}
            }
          }
        }
      };

      // 收集表单数据并转换为正确的类型
      document.querySelectorAll('[data-node][data-key]').forEach(input => {
        const node = input.dataset.node;
        const key = input.dataset.key;
        let value;

        // 根据输入类型获取值
        if (input.type === 'checkbox') {
          value = input.checked;
        } else if (input.type === 'number') {
          value = parseFloat(input.value);
          // 检查是否为整数
          if (value === Math.floor(value)) {
            value = parseInt(input.value, 10);
          }
        } else {
          // 尝试解析JSON格式的字符串值
          try {
            value = JSON.parse(input.value);
          } catch (e) {
            value = input.value;
          }
        }

        // 初始化节点数据结构
        if (!formData.prompt[node]) {
          // 查找节点类型（从节点标题中提取）
          const nodeElement = input.closest('.node-card');
          const nodeTitle = nodeElement.querySelector('h3').textContent;
          const classTypeMatch = nodeTitle.match(/\(([^)]+)\)/);
          const classType = classTypeMatch ? classTypeMatch[1] : '';

          formData.prompt[node] = {
            "inputs": {},
            "class_type": classType,
            "_meta": {
              "title": nodeTitle.split('(')[0].trim()
            }
          };
        }

        // 设置输入值
        formData.prompt[node].inputs[key] = value;
      });

      // 显示生成的JSON
      jsonOutput.textContent = JSON.stringify(formData, null, 4);

      // 显示成功提示
      showAlert('配置已成功转换为JSON格式', 'success');

      // 滚动到JSON输出区域
      jsonOutput.scrollIntoView({ behavior: 'smooth' });
    });

    // 重置按钮功能
    resetBtn.addEventListener('click', function() {
      Object.keys(originalFormData).forEach(node => {
        Object.keys(originalFormData[node]).forEach(key => {
          const input = document.querySelector(`[data-node="${node}"][data-key="${key}"]`);
          if (input) {
            const value = originalFormData[node][key];
            if (input.type === 'checkbox') {
              input.checked = value;
            } else {
              input.value = value;
            }
          }
        });
      });

      // 重置JSON输出
      jsonOutput.innerHTML = "{<br>    <span class=\"text-gray-400\">// 提交表单后将显示JSON数据</span><br>}";

      // 显示重置提示
      showAlert('表单已重置为初始状态', 'info');
    });

    // 显示提示信息
    function showAlert(message, type = 'info') {
      alert.textContent = message;
      alert.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-blue-100', 'text-blue-800', 'bg-red-100', 'text-red-800');

      switch(type) {
        case 'success':
          alert.classList.add('bg-green-100', 'text-green-800');
          break;
        case 'error':
          alert.classList.add('bg-red-100', 'text-red-800');
          break;
        default:
          alert.classList.add('bg-blue-100', 'text-blue-800');
      }

      // 3秒后自动隐藏提示
      setTimeout(() => {
        alert.classList.add('hidden');
      }, 3000);
    }
  });
</script>
</body>
</html>